<template>
  <div>
    <!-- 作业:做一个计算器组件 -->
    <div style="width: 400px; height: 100px">
      <!-- 修改为双大括号 -->
      <h1>{{ num1 + num2 }}</h1>
    </div>
    <!-- 修改点击事件处理逻辑 -->
    <button @click="toggleFlag1">1</button>
    <button @click="toggleFlag2">2</button>
    <button @click="updateNum2">2</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
const num1 = ref(0);
const num2 = ref(0);
const flag1 = ref(false);
const flag2 = ref(false);

// 定义切换 flag1 并更新 num1 的函数
const toggleFlag1 = () => {
  flag1.value = !flag1.value;
  if (flag1.value) {
    num1.value = 1;
  } else {
    num1.value = 0;
  }
};
const toggleFlag2 = () => {
  flag2.value = !flag2.value;
  if (flag2.value) {
    num2.value = 2;
  } else {
    num2.value = 0;
  }
};

// 定义更新 num2 的函数
const updateNum2 = () => {
  num2.value = 2;
};
</script>
